<template>
  <div class="main-page">
    <download></download>

    <div class="swiper-container">
      <swiper :options="swiperOption" ref="myswiper">

        <swiper-slide v-for="video in circleVideoVo" :key="video.id">
          <div class="circle-header-item video-item">
            <video ref="video" class="video" :poster="videoImgUrl">
              <source
                type="video/mp4"
                :src="video.fileUrl"
                class="video-source">

                您的浏览器不支持
            </video>
            <span class="play-item" @click="playVideo" v-show="!showVideo"></span>
          </div>
        </swiper-slide>

        <swiper-slide v-for="item in circleImageVo" :key="item.url">
          <img :src="item.url" alt="">
        </swiper-slide>

        <div class="swiper-pagination my-swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>

    <article>
      <p class="userinfo">
        <strong class="username">{{ realName }}</strong>
        <span class="job">{{ company }}，{{ profession }}</span>
      </p>

      <hr class="hr">

      <section class="section no-border">
        <strong class="title">全部音频</strong>
        <ul class="audio-list">
          <li :class="['audio', { 'active': activeAudio && activeAudio.id === audio.id }]"
            v-for="audio in tMicroSpeakingDetailVos"
            :key="audio.id"
            @click="playAudio(audio)">
            {{ audio.title }}
          </li>
        </ul>
      </section>

      <section class="section">
        <p>
          <strong class="title">{{ realName }}</strong>
          <span>{{ company }}，{{ profession }}</span>
        </p>
        <line-breaks
          :text="circleIntroduction"></line-breaks>
      </section>

      <section class="section">
        <strong class="title">{{ circleName }}</strong>
        <p>
          {{circleIntroduce}}
        </p>
      </section>

      <section class="section">
        <strong class="title">专栏介绍</strong>
        <p>
          {{ tMicroSpeakingMainVo.introduce }}
        </p>
      </section>

      <section class="section">
        <strong class="title">适宜人群</strong>
        <p>
          {{ tMicroSpeakingMainVo.suitablePeople }}
        </p>
      </section>
    </article>

    <div class="active-audio" @click.prevent.stop="audioDialogVisible = true" v-if="activeAudio">
      <span
        @click.stop.prevent="toggleAudio"
        :class="['audio-span', { isPlaying: audioPlaying }]">
      </span>
      <div class="audio-info">
        <strong class="title">{{ activeAudio.title }}</strong>
        <span class="duration">{{ activeAudio.audioDuration }}</span>
      </div>
      <span class="close" @click.stop="activeAudio = null">&times;</span>
    </div>

    <mt-popup class="audio-popup" position="bottom" v-model="audioDialogVisible">
      <div class="container" v-if="activeAudio">
        <div class="height0">
          <span class="hide" @click.stop.prevent="audioDialogVisible = false"></span>
        </div>

        <div class="scroller">
          <div class="cover-span">
            <img class="span" :src="activeAudio.backImg" alt="">
          </div>
          <p class="title">{{ activeAudio.title }}</p>
          <p class="summary">{{ activeAudio.summary }}</p>

          <audio-control
            v-if="activeAudio"
            ref='audioControl'
            :active-audio="activeAudio"
            @statusChanged="audioStatusChanged"
            >
          </audio-control>
        </div>

        <div class="action-bar">
          <div class="span">
            <a class="btn word" :href="`/focus/#/maudio_detail?detailId=${activeAudio.mid}&videoId=${activeAudio.id}&share=true`">文稿</a>
          </div>
          <div class="span">
            <span class="btn zan">0</span>
          </div>
        </div>
      </div>
    </mt-popup>

  </div>
</template>

<script>
import FocusApi from "../../api/focus.js";
import download from '../../components/download.vue';
import audioControl from '../../components/audioControl.vue';
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import lineBreaks from '../../components/lineBreaks.vue';

export default {
	 components: {
      download,
      lineBreaks,
      swiper,
      swiperSlide,
      audioControl
    },
  data() {
    return {
      showVideo: false,
      id: this.$route.query.id,
      title: "",
      articleContent: "",
      swiperOption: {
        pagination: {
          el: '.swiper-pagination',
          type: 'fraction'
        },
      },

      realName: '',
      company:'',
      profession:'',
      tMicroSpeakingMainVo: [],
      tMicroSpeakingDetailVos: [],
      circleImageVo:[],
      circleVideoVo:[],
      circleLogo:'',
      circleIntroduce :'',
      circleIntroduction:'',
      circleName:'',
      videoImgUrl:'',
      isManager:0,
      dateTime:'',
      index: 0,

      // 音频
      audioPlaying: false,
      activeAudio: null,
      audioDialogVisible: false
    };
  },
  mounted() {
    FocusApi.getMindMainDetail(this.id, "").then(res => {
      let data = res.result;
      let _this = this;


      this.realName = data.realName
      this.company = data.company
      this.profession = data.profession
      this.tMicroSpeakingMainVo = data.tMicroSpeakingMainVo
      this.tMicroSpeakingDetailVos = data.tMicroSpeakingDetailVos

      this.circleImageVo = data.circleImageVo
      this.circleVideoVo = data.circleVideoVo
      this.circleLogo = data.circleLogo
      this.circleIntroduce = data.circleIntroduce
      this.circleIntroduction = data.circleIntroduction
      this.circleName = data.circleName
      this.videoImgUrl = data.videoImgUrl
      this.isManager = data.isManager
      this.dateTime = data.dateTime
    });
  },

  methods: {
    audioStatusChanged (val) {
      this.audioPlaying = val
    },

    toggleAudio () {
      this.$refs.audioControl.audioToggle()
    },

    playVideo () {
      this.showVideo = true
      document.querySelector('.video').play()


      // document.querySelector('.video-source').src = this.videoUrl
      // document.querySelector('.video').load()
      // document.querySelector('.video').play()
    },

    // pauseVideo () {
    //   this.showVideo = false
    //   document.querySelector('.video').play()
    // },

    playAudio (audio) {
      if (!this.activeAudio || (audio.id !== this.activeAudio.id)) {
        this.activeAudio = null
        this.audioPlaying = true
        this.activeAudio = audio
      }
    },

    getDateDiff(dateTimeStamp) {
      var result;
      var minute = 1000 * 60;
      var hour = minute * 60;
      var day = hour * 24;
      var halfamonth = day * 15;
      var month = day * 30;
      var now = new Date().getTime();
      var diffValue = now - dateTimeStamp;
      if (diffValue < 0) {
        return;
      }
      var monthC = diffValue / month;
      var weekC = diffValue / (7 * day);
      var dayC = diffValue / day;
      var hourC = diffValue / hour;
      var minC = diffValue / minute;
      if (monthC >= 1) {
        if (monthC <= 12) result = "发布于" + parseInt(monthC) + "月前";
        else {
          result = "发布于" + parseInt(monthC / 12) + "年前";
        }
      } else if (weekC >= 1) {
        result = "发布于" + parseInt(weekC) + "周前";
      } else if (dayC >= 1) {
        result = "发布于" + parseInt(dayC) + "天前";
      } else if (hourC >= 1) {
        result = "发布于" + parseInt(hourC) + "小时前";
      } else if (minC >= 1) {
        result = "发布于" + parseInt(minC) + "分钟前";
      } else {
        result = "刚刚";
      }
      return result;
    }
  }
};
</script>

<style lang="less" scoped="scoped">
.main-page {
  padding-top: 1.04rem;
  font-size: 16px;
  font-family: "微软雅黑";
  text-align: justify;
  padding-bottom: 0.8rem;
}

.swiper-container {
  height: 5.6rem;

  img {
    width: 100%;
    height: 100%;
  }

  video {
    display: block;
    width: 100%;
    height: 100%;
  }

  .video-source {
    display: block;
    width: 100%;
    height: 100%;
  }

  .my-swiper-pagination {
    width: auto;
    position: absolute;
    bottom: 10px;
    right: 15px;
    left: auto;
    color: #fff;
    font-size: 0.22rem;
    padding: 0.12rem 0.24rem;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.5);
    margin: 0;
    line-height: 1;
  }
}

.hr {
  height: 0.15rem;
  background-color: #efefef;
  border: none;
  margin: 0;
  padding: 0;
}

.circle-header-item {
  width: 100%;
  height: 100%;
  font-size: 0;
  background-position: center top;
  float: left;
  position: relative;
  div {
    width: 100%;
    height: 100%;
    background-position: center top;
  }
  video {
    width: 100%;
    height: 100%;
  }
}

.video-item {
  position: relative;
  background-color: #000;

  div {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 88;
      width: 100%;
      height: 100%;
  }
  video {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 80;
      width: 100%;
      height: 100%;
  }
}

.play-item {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.2rem;
  height: 1.2rem;
  background: url(../../assets/img/play-icon.png) no-repeat;
  background-size: 100%;
  margin-left: -0.6rem;
  margin-top: -0.6rem;
  z-index: 888;
}

.section {
  border-top: 1px solid #cccccc;
  padding: 0.25rem 0.3rem;
  font-size: 0.28rem;
  line-height: 1.5;
  color: #282828;

  &.no-border {
    border: none;
  }

  strong.title {
    display:  block;
    font-weight: bold;
    font-size: 0.36rem;
    line-height: 1.1;
    padding-bottom: 0.15rem;
    color: #151515;
  }
}

.userinfo {
  padding: 0.2rem 0.3rem;

  .username {
    color: #000000;
    font-size: 0.3rem;
    font-weight: bold;
  }

  .job {
    display: block;
    font-size: 0.28rem;
    color: #282828;
    padding-top: 0.20rem;
    font-weight: bold;
  }
}

.audio-list {
  font-size: 0.28rem;
  color: #626262;
  // padding-left: 0.6rem;

  li {
    line-height: 0.3rem;
    padding: 0.05rem 0 0.05rem 0.6rem;
    margin-top: 0.2rem;
    background: url('../../assets/img/audio_btn.png') left center no-repeat;
    background-size: 0.4rem 0.4rem;

    &.active {
      background: url('../../assets/img/audio_btn_active.png') left center no-repeat;
      background-size: 0.4rem 0.4rem;
      color: #29abae;
    }
  }
}

.active-audio {
  padding: 0.15rem 0.3rem 0.15rem 0.2rem;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  align-items: center;

  .audio-span {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: url('../../assets/img/audio-pause.png') center center no-repeat;
    background-size: 80% 80%;

    &.isPlaying {
      background: url('../../assets/img/audio-play.png') center center no-repeat;
      background-size: 80% 80%;
    }
  }

  .audio-info {
    flex: 1;
    line-height: 1;
    margin-left: 0.15rem;

    .title {
      display: block;
      line-height: 1;
      padding-bottom: 0.05rem;
      font-size: 0.28rem;
    }

    .duration {
      font-size: 0.24rem;
    }
  }

  .close {
    width: 0.4rem;
    height: 0.4rem;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 1;
    font-size: 0.36rem;
  }
}

.audio-popup {
  height: 100%;
  width: 100%;
  overflow: hidden;

  .container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    padding-bottom: 0.8rem;

    .height0 {
      height: 0;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;

      .hide {
        position: absolute;
        top: 10px;
        left: 20px;
        width: 15px;
        height: 15px;
        border-top: 2px solid #ccc;
        border-left: 2px solid #ccc;
        transform: rotate(-135deg);
      }
    }

    .scroller {
      height: 100%;
      width: 100%;
      overflow-y: auto;
    }
  }

  .cover-span {
    display: block;
    width: 40%;
    margin: 0 auto;

    img {
      display: block;
      margin: 1.3rem auto 0 auto;
      width: 3.03rem;
      height: 4.5rem;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center center;
    }
  }

  .title {
    font-size: 0.3rem;
    padding: 0.1rem 0.3rem;
    color: #282828;
    text-align: center;
    margin-top: 0.3rem;
  }

  .summary {
    color: #626262;
    font-size: 0.28rem;
    text-align: center;
    margin-top: 0.05rem;
  }
}

.action-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1px solid #ccc;
  font-size: 0.24rem;
  text-align: center;
  display: flex;
  background-color: #fff;
  z-index: 2000;

  .span {
    flex: 1;
    padding: 0.1rem;
  }

  .btn {
    display: inline-block;
    padding-top: 0.4rem;
    color: #626262;
    text-align: center;
    width: 2em;

    &.word {
      background: url('../../assets/img/word.png') top center no-repeat;
      background-size: 0.3rem;
    }

    &.zan {
      background: url('../../assets/img/zan1.png') top center no-repeat;
      background-size: 0.34rem;
    }
  }
}
</style>

